<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>值绑定</title>
    <script src="../vue.global.js"></script>
    <style>
        .red{
            color:red;
        }
        .font-big{
            font-size: 50px;
        }
    </style>
</head>
<body>

<div id="App">
    {{counter}}

    <input type="checkbox" id="checkbox" v-model="check" v-bind:value="check">
    <label for="checkbox">{{check}}</label>

    <input type="text" name="userName"  v-model.lazy="msg">

    <div>{{msg}}</div>

    <input type="number" v-model.number="counter" >
    <div>{{typeof counter}}</div>

    <input type="text" v-model.trim="msg"/>
    <div>1{{msg}}2</div>

    <hr/>
    <input type="file" v-on:change="upload"/>
    <div>{{file}}</div>

</div>


<script>



    const App = {

        data(){
            return {
                counter:100,
                msg:"hello",
                check:true,
                file:''

            }
        },
        methods:{
            upload(){
                console.log(event);
            }
        },
        computed:{

        }
    };

    const vm = Vue.createApp(App).mount("#App")


</script>
</body>
</html>